<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style>
			*{  /* 初始化所有标签 */
				margin: 0;
				padding: 0;
			}
			.box{
				width: 330px;
				height: 330px;
				border: 1px solid blue;
				font-size: 36px;
				text-align: center;
				float: left;
			}
			.box2{
				width: 300px;
				height: 300px;
				background-color: aqua;
			}
			.clear{
				clear: both;
			/* }
			.fu{
				overflow: hidden; */
			}
			/* 3.添加after伪元素 */
			.clearfix:;after { /* 在什么之后 */
				content: ""; /* 内容为空 */
				display: block; /* 转为块元素 */
				height: 0; /* 清除两端浮动 */
				clear: both;
				visibility: hidden;
			}
		</style>
	</head>
	<body>
		<!-- 传统的网页布局：标准流(元素的显示模式)+浮动+定位 -->
		<!-- 浮动float:让块级元素一行内显示
				float:left;左浮动，盒子从左往右摆
				fioat:right;右浮动，盒子从右往左摆
				float：noon；不浮动，默认值
			1.浮动的元素会脱标(脱离标准流)
			2.浮动元素会一行内显示并且元素顶部对齐
			3.浮动的元素
		清楚浮动标签法：
		1.隔墙法
		2.给父盒子添加overflow:hidden;
		3.给父元素添加after伪元素
		 -->
		<!-- 快速创建标签：
		1.直接创建标签：标签名*个数>tab键
		2.创建带有类名的标签：标签名*个数>tab键
		3.创建带有类名的div：.类名*个数>tab键 -->
		<div class="clearfix">
		<div class="box">1</div>
		<div class="box" >2</div>
		<div class="box" >3</div>
		<!-- <div class="clear"></div>冗余代码 -->
		
		</div>
		<div class="box2"></div>
	</body>
</html>
<!-- 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
标准流+浮动布局策略：父级用标准流排列上下位置，内部子元素用浮动排列左右位置！ -->
